<template>
  <div id="ProductsOverview">
    <div id="productsVessels">
      <router-link class="produceA" active-class="actives" to="/HeadTop/ProductsOverview/HundredDay">近百天</router-link>
      <router-link class="produceA" active-class="actives" to="/HeadTop/ProductsOverview/ThisYear">今年</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductsOverview'
}
</script>

<style lang="less" scoped>
  .actives{
    background-color: rgb(255, 149, 18) !important;
    color: #ffffff !important;
  }
  #ProductsOverview{
    width: 100%;
    min-width: 1150px;
    background-color: rgb(255, 244, 231);
    padding: 15px;
    #productsVessels{
      width: 100%;
      background-color: #ffffff;
      border-radius: 5px;
      padding: 10px;
      .produceA{
        display: inline-block;
        width: 80px;
        height: 40px;
        background-color: red;
        text-decoration: none;
        text-align: center;
        line-height: 40px;
        background-color: rgb(235, 235, 235);
        color: rgb(191, 191, 191);
      }
    }
  }
</style>
